<template>
  <div class="comment">
    <div class="userInfo">
      <img v-if="commentData.user.head_img" :src="$axios.defaults.baseURL+commentData.user.head_img" alt class="img" />
      <img v-else src="@/assets/logo.png" alt class="img" />

      <div class="userInfo_details">
        {{ commentData.user.nickname }}
        <div class="date">
          {{ commentData.create_date.split('T')[0] }}
          {{ commentData.create_date.split('T')[1].split('.')[0] }}
        </div>
      </div>

      <div class="reply" @click="reply">回复</div>
    </div>

    <Parent 
      :parentData="commentData.parent" 
      v-if="commentData.parent" 
      :deep="deep" 
      @parentReply="parentReply"
    />

    <div class="content">{{ commentData.content }}</div>
  </div>
</template>

<script>
import Parent from "./Parent";

export default {
  data() {
    return {
      deep: 0
    };
  },
  props: ["commentData"],
  components: {
    Parent
  },
  created() {
    this.getDeep(this.commentData);
    console.log(this.deep);
  },
  methods: {
    getDeep(commentData) {
      if (commentData.parent) {
        this.deep++;

        return this.getDeep(commentData.parent);
      }
    },

    reply(){
      console.log(this.commentData.id);
      this.$emit('reply',{
        id:this.commentData.id,
        nickname:this.commentData.user.nickname
      })
    },

    parentReply(parentInfo){
      this.$emit('reply',parentInfo)
    }
  }
};
</script>

<style lang="less" scoped>
.comment {
  border-bottom: 0.278vw solid #ddd;
  padding: 7.222vw 4.444vw 6.667vw 4.444vw;

  .userInfo {
    display: flex;

    .img {
      width: 11.111vw;
      height: 11.111vw;
      object-fit: cover;
    }

    .userInfo_details {
      flex: 1;
      font-size: 4.444vw;
      color: #333;
      padding-left: 2.778vw;

      .date {
        font-size: 3.333vw;
        color: #707070;
      }
    }

    .reply {
      font-size: 3.889vw;
      color: #707070;
    }
  }

  .content {
    padding-top: 3.889vw;
    line-height: 7.222vw;
  }
}
</style>